<!-- eslint-disable vue/require-component-is -->
<!-- eslint-disable vue/no-template-shadow -->
<template>
  <div>
    <div id="widthZong" style="display: flex; justify-content: space-between">
      <div
        style="
          background-color: var(--color-bg-2);
          width: 200px;
          line-height: 55px;
          padding-left: 10px;
        "
      >
        <component
          strokeWidth="2"
          is="i-search"
          @click="visible = true"
          style="font-size: 18px; margin-left: 10px; margin-right: 20px"
        />
        <a-modal title="菜单搜索" v-model:visible="visible">
          <a-input @input="seach" placeholder="请输入路由名称" allow-clear v-model="name" />
          <div v-if="routerList.length > 0">
            <div style="margin-top: 10px" v-for="(item, index) in routerList" :key="index">
              <a-divider dashed>{{ item.name }}</a-divider>
              <a-tag
                @click="routes(items.fullPath)"
                size="large"
                style="margin-bottom: 5px; margin-right: 10px; cursor: pointer"
                v-for="(items, index) in item.children"
                :key="index"
                >{{ items.name }}</a-tag
              >
            </div>
          </div>
          <a-empty v-else />
          <template #footer>
            <a-space />
          </template>
        </a-modal>
        <component
          is="i-healthy-recognition"
          strokeWidth="2"
          @click="routese"
          :style="
            routers == 'user'
              ? 'color: #3491fa;font-size: 18px;margin:0 0'
              : 'font-size: 18px;margin:0 0'
          "
        />
      </div>

      <ActionItems id="boxWidth" />
    </div>
    <div style="border-top: 1px solid #e5e6eb; height: 45px !important" class="bottomAbcded">
      <div class="flex items-center justify-center h-full">
        <Scrollbar
          ref="scrollbar"
          class="flex-1"
          wrap-class="tab-bar__wrapper"
          style="margin-left: 20px"
        >
          <div class="flex" style="align-items: center" id="aa">
            <a-button
              v-for="item of dataForm"
              :key="item.fullPath"
              :type="currentTab == item.fullPath ? 'outline' : 'secondary'"
              class="mx-1 tab-item"
              :data="item.fullPath"
              @click="itemClick(item.fullPath, $event)"
              @contextmenu.prevent.stop="onContextMenu(item.fullPath, $event)"
              style="
                border: 1px dashed #e5e6eb;
                background-color: transparent;
                font-size: 13px;
                padding: 0 8px;
              "
            >
              {{ item.name }}
              <span v-if="!item.meta?.affix" class="icon-item" @click.stop="iconClick(item)">
                <CloseOutlined />
              </span>
            </a-button>
          </div>
        </Scrollbar>
        <span class="arrow-wrapper" style="align-items: center">
          <span style="width: 1px; background-color: #e5e6eb; height: 12px"></span>
          <a-popover position="right" trigger="click">
            <!-- <img class="img" src="@/assets/ico/全部_all-application.png" alt="" /> -->
            <component
              is="i-all-application"
              strokeWidth="2"
              @click="onContextMenus('', $event)"
              style="font-size: 19px; margin: 0 20px"
            />
            <template #content>
              <ul class="contex-menu-wrapper" :style="contextMenuStyled">
                <li>
                  <a-button type="text" @click="refreshRoute($event)">
                    <template #icon>
                      <i-refresh theme="outline" size="14" />
                    </template>
                    刷新页面
                  </a-button>
                </li>
                <li :disabled="showLeftMenu">
                  <a-button :disabled="showLeftMenu" type="text" @click="closeOwn($event)">
                    <template #icon>
                      <i-close-one theme="outline" size="14" />
                    </template>
                    关闭当前
                  </a-button>
                </li>
                <li :disabled="showLeftMenu">
                  <a-button :disabled="showLeftMenu" type="text" @click="closeLeft($event)">
                    <template #icon>
                      <i-to-left theme="outline" size="14" />
                    </template>
                    关闭左侧
                  </a-button>
                </li>
                <li :disabled="showRightMenu">
                  <a-button :disabled="showRightMenu" type="text" @click="closeRight($event)">
                    <template #icon>
                      <i-to-right theme="outline" size="14" />
                    </template>
                    关闭右侧
                  </a-button>
                </li>
                <li :disabled="showLeftMenu">
                  <a-button :disabled="showLeftMenu" type="text" @click="coloseOther($event)">
                    <template #icon>
                      <i-link-out theme="outline" size="14" />
                    </template>
                    关闭其他
                  </a-button>
                </li>
                <li>
                  <a-button type="text" @click="closeAll($event)">
                    <template #icon>
                      <i-power theme="outline" size="14" />
                    </template>
                    关闭所有
                  </a-button>
                </li>
              </ul>
            </template>
          </a-popover>
        </span>
      </div>
      <ul v-if="showRightMenus" class="contex-menu-wrapper" :style="contextMenuStyled">
        <li>
          <a-button type="text" @click="refreshRoute">
            <template #icon>
              <i-refresh theme="outline" size="14" />
            </template>
            刷新页面
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="closeOwn">
            <template #icon>
              <i-close-one theme="outline" size="14" />
            </template>
            关闭当前
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="closeLeft">
            <template #icon>
              <i-to-left theme="outline" size="14" />
            </template>
            关闭左侧
          </a-button>
        </li>
        <li :disabled="showRightMenu">
          <a-button :disabled="showRightMenu" type="text" @click="closeRight">
            <template #icon>
              <i-to-right theme="outline" size="14" />
            </template>
            关闭右侧
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="coloseOther">
            <template #icon>
              <i-link-out theme="outline" size="14" />
            </template>
            关闭其他
          </a-button>
        </li>
        <li>
          <a-button type="text" @click="closeAll">
            <template #icon>
              <i-power theme="outline" size="14" />
            </template>
            关闭所有
          </a-button>
        </li>
      </ul>
      <ul v-if="showContextMenu" class="contex-menu-wrapper" :style="contextMenuStyle">
        <li>
          <a-button type="text" @click="refreshRoute">
            <template #icon>
              <i-refresh theme="outline" size="14" />
            </template>
            刷新页面
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="closeOwn">
            <template #icon>
              <i-close-one theme="outline" size="14" />
            </template>
            关闭当前
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="closeLeft">
            <template #icon>
              <i-to-left theme="outline" size="14" />
            </template>
            关闭左侧
          </a-button>
        </li>
        <li :disabled="showRightMenu">
          <a-button :disabled="showRightMenu" type="text" @click="closeRight">
            <template #icon>
              <i-to-right theme="outline" size="14" />
            </template>
            关闭右侧
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="coloseOther">
            <template #icon>
              <i-link-out theme="outline" size="14" />
            </template>
            关闭其他
          </a-button>
        </li>
        <li>
          <a-button type="text" @click="closeAll">
            <template #icon>
              <i-power theme="outline" size="14" />
            </template>
            关闭所有
          </a-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
  import { mapState, mapActions } from 'pinia'
  import path from 'path-browserify'
  import { defineComponent, unref } from 'vue'
  import { collectionAdd, collectionGet, collectionList, collectionDelete } from '@/api/url'
  import {
    IconClose as CloseOutlined,
    // IconLeft as LeftOutlined,
    // IconRefresh as ReloadOutlined,
    // IconToLeft as ArrowLeftOutlined,
    // IconToRight as ArrowRightOutlined,
  } from '@arco-design/web-vue/es/icon'
  import useVisitedRouteStore from '@/store/modules/visited-routes'
  import { get } from '@/api/http'
  import { RouteRecordRaw } from 'vue-router'
  import { useFullscreen } from '@vueuse/core'
  import { Message, Modal } from '@arco-design/web-vue'
  import { routerMenus } from '@/store/modules/userRouter'
  const { isSupported, enter, isFullscreen, exit } = useFullscreen(document.documentElement)
  export default defineComponent({
    name: 'TabBar',
    components: {
      CloseOutlined,
      // LeftOutlined,
      // ReloadOutlined,
      // ArrowLeftOutlined,
      // ArrowRightOutlined,
    },
    data() {
      return {
        userShow: false,
        widths: '',
        widths1: '',
        widthsq: '',
        widthsw: '',
        name: '',
        visible: false,
        favoriteList: [],
        showTab: false,
        lo: '',
        list: [],
        currentTab: this.$route.path,
        contextMenuStyle: {
          left: '0',
          top: '0',
        },
        contextMenuStyles: {
          left: '0',
          top: '0',
        },
        contextMenuStyled: {
          left: '0',
          top: '0',
        },
        showContextMenu: false,
        selectRoute: {},
        showLeftMenu: true,
        showRightMenu: true,
        showCard: false,
        showRightMenus: false,
        showLeftMenue: true,
        showRightMenue: true,
        selectRoutes: {},
        aab: true,
        routerList: [{ children: [] }],
        show: false,
        routers: '',
        dataForm: [],
        listsss: [],
        screenWidth: window.innerWidth, // 初始化时获取屏幕宽度
        routerChildren: routerMenus,
      }
    },
    computed: {
      ...mapState(useVisitedRouteStore, ['getVisitedRoutes']),
    },
    watch: {
      // window.onresize = function () {
      //   console.log(this.show)
      //   if (document.documentElement.clientWidth <= 980) {
      //     this.show = true
      //   }
      // },
      $route: {
        handler(newVal, oldValue) {
          this.currentTab = newVal.fullPath || ''
          this.dataForm = []
          if (window.location.pathname.split('/')[1] !== 'children') {
            console.log(this.getVisitedRoutes, '管理')
            console.log(localStorage.getItem('routers'), '管理1111')
            this.getVisitedRoutes.forEach((item: any, index) => {
              if (item.fullPath !== localStorage.getItem('routers')) {
                if (item.fullPath != '/systemLogin') {
                  if (item.path != '/channel/pageSet/design') {
                    if (item.path != '/setting/work/orderDetail') {
                      if (item.path != '/other/complaint') {
                        if (item.path != '/auxiliary/notice') {
                          if (item.path != '/marketing/coupon') {
                            if (item.path != '/marketing/speed') {
                              if (item.path != '/other/one/card') {
                                if (item.path != '/other/poll') {
                                  if (item.path != '/other/live/code') {
                                    this.dataForm.push(item)
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            })
            console.log(this.dataForm, '管理')
            console.log(newVal.fullPath.includes('?card='), '管理')
            if (newVal.fullPath.includes('?card=')) {
              if (!this.dataForm.find((it: any) => it.fullPath === newVal.fullPath)) {
                this.dataForm.push(newVal)
                this.getVisitedRoutes.push(newVal)
              }
            }
            localStorage.setItem('visited-routes', JSON.stringify(this.dataForm))
            var list = []
            if (localStorage.getItem('routers') != null) {
              const arr = localStorage.getItem('routers')
              list = arr.split('/')
              console.log(list)
            }
            if (list.length > 0) {
              console.log(list, '看看数组是什么')
              if (
                window.location.pathname.split('/')[2] == list[2] &&
                window.location.pathname.split('/')[1] == list[1]
              ) {
                this.routers = 'user'
              } else {
                this.routers = ''
              }
            }
          } else {
            console.log(this.getVisitedRoutes, '代理')
            this.getVisitedRoutes.forEach((item: any, index) => {
              if (item.path !== '/children/home/monitor') {
                // if (item.meta) {
                //   item.meta.affix = false
                // }
                if (item.fullPath != '/systemLogin') {
                  this.dataForm.push(item)
                }
              }
            })
            console.log(this.dataForm, '代理')
            if (
              window.location.pathname.split('/')[3] == 'monitor' &&
              window.location.pathname.split('/')[2] == 'home'
            ) {
              this.routers = 'user'
            } else {
              this.routers = ''
            }
          }

          setTimeout(() => {
            const scrollbar = unref((this.$refs.scrollbar as any).getWrapContainer())
            const el = document.querySelector(`[data="${this.currentTab}"]`) as HTMLElement
            el &&
              scrollbar.scrollTo({
                left: el.offsetLeft,
                behavior: 'smooth',
              })
          }, 0)
        },
        immediate: true,
      },
      // screenWidth(val) {
      //   // console.log(val)
      // },
      showContextMenu(val) {
        console.log(val)
        if (val) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      },

      showRightMenus(val) {
        console.log(val)
        if (val) {
          document.body.addEventListener('click', this.closeMenuse)
        } else {
          document.body.removeEventListener('click', this.closeMenuse)
        }
      },
    },
    mounted() {
      if (window.location.pathname.split('/')[1] !== 'children') {
        this.collectionGetFn()
      } else {
        this.routerList = this.routerChildren
      }
      // window.addEventListener('resize', (val) => {
      //   this.screenWidth = val.currentTarget.innerWidth
      //   // console.log(this.screenWidth)
      // })
      // if (window.location.pathname.split('/')[1] !== 'children') {
      //   if (this.screenWidth > 980) {
      //     this.widths1 = document.getElementById('boxWidth')?.getBoundingClientRect().width
      //   }

      //   this.widths =
      //     document.getElementById('widthZong')?.getBoundingClientRect().width - this.widths1
      // } else {
      //   this.widths1 = 350
      //   this.widths = document.getElementById('widthZong')?.getBoundingClientRect().width - 350
      // }

      // window.addEventListener('resize', (val) => {
      //   this.widths = ''
      //   this.widths =
      //     document.getElementById('widthZong')?.getBoundingClientRect().width - this.widths1
      // })
    },
    methods: {
      // 判断是否为手机端
      isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      },
      seach() {
        function filterItems(listaa: any, thisName: any) {
          let result: any = []
          if (listaa != undefined) {
            listaa.forEach((item: any) => {
              if (item.name.includes(thisName)) {
                result.push(item)
              } else {
                const filteredChildren = filterItems(item.children, thisName)
                if (filteredChildren.length > 0) {
                  item.children = filteredChildren
                  result.push(item)
                }
              }
            })
          }
          return result
        }
        if (this.name.length > 0) {
          this.routerList = filterItems(this.routerList, this.name)
        } else {
          if (window.location.pathname.split('/')[1] !== 'children') {
            this.collectionGetFn()
          } else {
            this.routerList = this.routerChildren
          }
        }
      },
      showTabFn() {
        this.showTab = !this.showTab
      },
      ...mapActions(useVisitedRouteStore, [
        'removeVisitedRoute',
        'findLastRoutePath',
        'closeRightVisitedView',
        'closeLeftVisitedView',
        'closeAllVisitedView',
        'closeOtherVisitedView',
        'closeOwnVisitedView',
      ]),
      reload() {
        Modal.warning({
          title: '提示',
          content: '是否清除当前缓存？',
          titleAlign: 'start',
          okText: '清除',
          hideCancel: false,
          cancelText: '再想想',
          onOk: () => {
            Message.success('清除成功')
            localStorage.clear()
            location.reload()
          },
        })
      },
      onScreenFull() {
        if (!isSupported) {
          Message.error('当前浏览器不支持全屏操作')
          return false
        }
        this.aab = isFullscreen.value
        console.log(this.aab)
        if (isFullscreen.value) {
          exit()
        } else {
          enter()
        }
      },
      itemClick(path: string | undefined, e: MouseEvent) {
        console.log(e.target)
        this.handleTabClick(e.target as HTMLElement, path || '/')
      },
      itemChildClick(path: string | undefined, e: MouseEvent) {
        this.handleTabClick(
          (e.target as HTMLElement).parentElement?.parentElement as HTMLElement,
          path || '/'
        )
      },
      handleTabClick(el: HTMLElement, path: string) {
        this.$router.push(path).then(() => {
          // const scrollbar = unref((this.$refs.scrollbar as any).getWrapContainer())
          // scrollbar.scrollTo({
          //   left: el.offsetLeft,
          //   behavior: 'smooth',
          // })
        })
      },
      collectionListFn() {
        get({
          url: collectionList,
          data: () => {
            return {}
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              this.favoriteList = res.data
            }
          })
          .catch(() => {})
      },
      collectionGetFn() {
        get({
          url: collectionGet,
          data: () => {
            return {}
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              this.routerList = res.data
              console.log(this.routerList)
            }
          })
          .catch(() => {})
      },
      clickFn(val: any) {
        if (val.collection == true) {
          this.collectionDeleteFn(val)
          val.collection = false
        } else {
          this.collectionAddFn(val)
          val.collection = true
        }
      },
      collectionDeleteFn(val: any) {
        console.log(val)
        get({
          url: collectionDelete,
          data: () => {
            return {
              route: val.route,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              val.collection = false
              this.collectionListFn()
            }
          })
          .catch(() => {})
      },
      collectionAddFn(val: any) {
        console.log(val)
        get({
          url: collectionAdd,
          data: () => {
            return {
              route: val.route,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              val.collection == true
              this.collectionListFn()
            }
          })
          .catch(() => {})
      },
      iconClick(fullPath: any) {
        console.log(fullPath)
        let arrsssss: any = []
        this.dataForm.forEach((element: any) => {
          if (element.path !== fullPath.path) {
            arrsssss.push(element)
          }
        })
        this.removeVisitedRoute(fullPath)
        this.dataForm = arrsssss
        const urls =
          window.location.pathname.split('/')[1] == 'children'
            ? '/children/home/monitor'
            : localStorage.getItem('routers')
        this.$router.push(urls)
      },
      findAffixedRoutes(routes: Array<RouteRecordRaw>, basePath: string) {
        const temp = [] as Array<RouteRecordRaw>
        routes.forEach((it) => {
          if (it.meta && !it.meta.hidden && it.meta.affix) {
            temp.push({
              name: it.name,
              path: it.path,
              meta: it.meta,
            } as RouteRecordRaw)
          }
          if (it.children && it.children.length > 0) {
            temp.push(...this.findAffixedRoutes(it.children, path.resolve(basePath, it.path)))
          }
        })
        return temp
      },
      isAffix(route: RouteRecordRaw) {
        return route.meta && route.meta.affix
      },
      onContextMenu(fullPath: string | undefined, e: MouseEvent) {
        console.log(fullPath)
        const tempView = this.getVisitedRoutes.find((it) => it.path === fullPath)
        console.log(tempView)
        if (!tempView) return
        const { clientX } = e
        const { x } = this.$el.getBoundingClientRect()
        e.preventDefault()
        this.selectRoute = tempView
        console.log(this.selectRoute)
        if (this.selectRoute) {
          this.showLeftMenu = this.isLeftLast(fullPath || '/')
          this.showRightMenu = this.isRightLast(fullPath || '/')
          const screenWidth = document.body.clientWidth
          this.contextMenuStyle.left =
            (clientX + 130 > screenWidth ? clientX - 130 - x - 15 : clientX - x + 15) + 'px'
          this.contextMenuStyle.top = '25px'
          this.showContextMenu = true

          console.log(this.showContextMenu)
        }
      },
      onContextMenus(fullPath: string | undefined, e: MouseEvent) {
        console.log(e)
        const tempView = this.getVisitedRoutes.find((it) => it.path === window.location.pathname)
        if (!tempView) return
        e.preventDefault()
        this.selectRoute = tempView
        if (this.selectRoute) {
          this.showLeftMenu = this.isLeftLast(window.location.pathname || '/')
          this.showRightMenu = this.isRightLast(window.location.pathname || '/')
        }
      },
      routes(val: any) {
        console.log(val, '是啥呀')
        this.visible = false
        this.$router.push(val)
      },
      routese() {
        var bns
        if (window.location.pathname.split('/')[1] == 'children') {
          bns = '/children/home/monitor'
        } else {
          bns = localStorage.getItem('routers')
        }
        this.$router.push(bns)
      },
      moue(e: MouseEvent) {
        const aa: any = localStorage.getItem('return')
        this.list = JSON.parse(aa)
        console.log(this.list)
        const { clientX } = e
        const { x } = this.$el.getBoundingClientRect()
        e.preventDefault()
        const screenWidth = document.body.clientWidth
        this.contextMenuStyles.left =
          (clientX + 130 > screenWidth ? clientX - 130 - x - 15 : clientX - x + 15) + 'px'
        this.contextMenuStyles.top = '25px'
        this.collectionGetFn()
        this.collectionListFn()
        console.log(this.routerList)
      },

      removeTab(fullPath: string) {
        const findItem = this.getVisitedRoutes.find((it) => it.path === fullPath)
        if (findItem) {
          this.removeVisitedRoute(findItem as RouteRecordRaw).then(() => {
            if (this.currentTab === fullPath) {
              this.currentTab = this.findLastRoutePath()
              this.$router.push(this.currentTab)
            }
          })
        }
      },
      // context menu actions
      isLeftLast(tempRoute: string) {
        return this.getVisitedRoutes.findIndex((it) => it.path === tempRoute) === 0
      },
      isRightLast(tempRoute: string) {
        return (
          this.getVisitedRoutes.findIndex((it) => it.path === tempRoute) ===
          this.getVisitedRoutes.length - 1
        )
      },
      onDropDownSelect(key: string) {
        switch (key) {
          case 'refresh':
            this.refreshRoute()
            break
          case 'close':
            this.closeAll()
            break
        }
      },
      refreshRoute() {
        this.$router.replace({ path: '/redirect' + this.$route.path })
      },
      closeLeft(val?: any) {
        if (val) {
          const tempView = this.getVisitedRoutes.find((it) => it.path === window.location.pathname)
          if (!tempView) return
          this.selectRoute = tempView
        }
        if (!this.selectRoute) return
        var indexNums: any
        this.dataForm.forEach((element, index) => {
          console.log(this.selectRoute)
          if (element == this.selectRoute) {
            indexNums = index
          }
        })
        this.dataForm.splice(0, indexNums)
        this.closeLeftVisitedView(this.selectRoute as RouteRecordRaw).then(() => {
          if (this.$route.fullPath !== (this.selectRoute as RouteRecordRaw).path) {
            this.$router.push(this.findLastRoutePath())
          }
        })
      },
      closeOwn(val?: any) {
        if (val) {
          const tempView = this.getVisitedRoutes.find((it) => it.path === window.location.pathname)
          if (!tempView) return
          this.selectRoute = tempView
        }
        if (!this.selectRoute) return
        var bna
        if (window.location.pathname.split('/')[1] == 'children') {
          bna = '/children/home/monitor'
        } else {
          bna = localStorage.getItem('routers')
        }
        this.closeOwnVisitedView(this.selectRoute as RouteRecordRaw).then(() => {
          if (this.$route.fullPath !== '') {
            window.location.pathname.split('/')[1] == 'children'
              ? '/children/home/monitor'
              : localStorage.getItem('routers')
            this.$router.push(bna)
          }
        })
      },
      coloseOther(val?: any) {
        if (val) {
          console.log(window.location.pathname)
          const tempView = this.getVisitedRoutes.find((it) => it.path === window.location.pathname)
          if (!tempView) return
          this.selectRoute = tempView
        }
        if (!this.selectRoute) return

        let array: any = []
        this.dataForm.forEach((element, index) => {
          console.log(this.selectRoute)
          if (element.meta.affix == true) {
            array.push(element)
          }
          if (this.dataForm.length == index + 1) {
            if (window.location.pathname.split('/')[1] !== 'children') {
              if (window.location.pathname !== '/home/index') {
                array.push(this.selectRoute)
              }
            } else {
              if (window.location.pathname !== '/children/home/monitor') {
                array.push(this.selectRoute)
              }
            }
          }
        })
        this.dataForm = array
        this.closeOtherVisitedView(this.selectRoute as RouteRecordRaw).then(() => {
          if (this.$route.fullPath !== (this.selectRoute as RouteRecordRaw).path) {
            this.$router.push(this.findLastRoutePath())
          }
        })
      },
      closeRight(val?: any) {
        if (!val) {
          const tempView = this.getVisitedRoutes.find((it) => it.path === window.location.pathname)
          if (!tempView) return
          this.selectRoute = tempView
        }
        if (!this.selectRoute) return
        var indexNum: any
        this.dataForm.forEach((element, index) => {
          console.log(this.selectRoute)
          if (element == this.selectRoute) {
            indexNum = index
          }
        })
        this.dataForm.forEach((element, index) => {
          this.dataForm.splice(indexNum + 1, this.dataForm.length - index - 1)
        })
        this.closeRightVisitedView(this.selectRoute as RouteRecordRaw).then(() => {
          if (this.$route.fullPath !== (this.selectRoute as RouteRecordRaw).path) {
            this.$router.push(this.findLastRoutePath())
          }
        })
      },
      closeAll(val?: any) {
        // if (val) {
        //   const tempView = this.getVisitedRoutes.find((it) => it.path === window.location.pathname)
        //   if (!tempView) return
        //   this.selectRoute = tempView
        // }
        this.closeAllVisitedView().then(() => {
          this.$router.push(
            window.location.pathname.split('/')[1] == 'children'
              ? '/children/home/monitor'
              : localStorage.getItem('routers')
          )
          this.dataForm = []
        })
      },

      closeMenu() {
        this.showContextMenu = false
      },
      closeMenus() {
        this.showCard = false
      },
      closeMenuse() {
        this.showRightMenus = false
      },
      leftArrowClick() {
        const scrollbar = unref((this.$refs.scrollbar as any).getWrapContainer())
        const scrollX = scrollbar.scrollLeft || 0
        scrollbar.scrollTo({
          left: Math.max(0, scrollX - 200),
          behavior: 'smooth',
        })
      },
      rightArrowClick() {
        const scrollbar = unref((this.$refs.scrollbar as any).getWrapContainer())
        const scrollX = scrollbar.scrollLeft || 0
        scrollbar.scrollTo({
          left: scrollX + 200,
          behavior: 'smooth',
        })
      },
    },
  })
</script>

<style>
  .tab-bar__wrapper {
    display: flex;
    align-items: center;
  }
</style>

<style lang="less" scoped>
  .bottomAbcded {
    background: var(--color-bg-2);
    height: 45px !important;

    :deep(.arco-btn-size-small) {
      padding: 0 8px;
      height: 32px;

      font-size: 14px;
    }

    :deep(.arco-btn-icon) {
      display: flex;
      align-items: center;
    }

    height: 50px !important;
    position: relative;
    height: @tabHeight;
    box-sizing: border-box;
    white-space: nowrap;

    // box-shadow: 10px 5px 10px rgb(0 0 0 / 10%);
    .contex-menu-wrapper {
      position: absolute;
      width: 120px;
      z-index: 999;
      list-style: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      background-color: var(--color-bg-1);
      padding-left: 0;

      & > li {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 5px 0;

        & button {
          width: 100%;
        }
      }

      & > li:hover {
        color: var(--primary-color);
      }
    }

    .contex-menu-wrappers {
      position: absolute;
      width: 200px;
      z-index: 999;
      list-style: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      background-color: var(--color-bg-1);
      padding-left: 0;
    }

    .humburger-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .tab-humburger-wrapper {
      margin-left: 40px;
      transition: margin-left @transitionTime;
    }

    .tab-no-humburger-wrapper {
      margin-left: 0;
      transition: margin-left @transitionTime;
    }

    .tab-item {
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;

      .icon-item {
        margin-left: 0;
        width: 0;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        overflow: hidden;
      }

      &:hover {
        .icon-item {
          display: inline-flex;
          width: 20px;
          height: 20px;
          // max-width: 16px;
          // max-height: 16px;
          margin-left: 5px;
          font-size: 16px;
          transform: scale(0.8);
          background-color: rgba(0, 0, 0, 0.12);
          border-radius: 50%;
          padding: 2px;
          transition: all 0.2s ease-in-out;
        }
      }
    }

    .arrow-wrapper {
      cursor: pointer;
      font-size: 16px;
      margin: 0 8px;
      display: inline-flex;
    }

    .arrow-wrapper__disabled {
      cursor: not-allowed;
      color: #b9b9b9;
    }
  }
  .blue {
    color: #3491fa;
  }

  :deep(.arco-tabs-nav-ink) {
    display: none;
  }

  .custom-radio-card {
    margin: 5px 0;
    display: flex;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 6px 6px 6px 0px;
    background-color: #f2f3f5;
  }

  .custom-radio-card-mask {
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 12px;
  }

  .custom-radio-card:hover,
  .custom-radio-card-checked,
  .custom-radio-card:hover .custom-radio-card-mask,
  .custom-radio-card-checked .custom-radio-card-mask {
    // border-color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked {
    // background-color: var(--color-primary-light-1);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    // background-color: rgb(var(--primary-6));
  }

  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .harder {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .line {
    width: 120px;
    height: 1px;
    background-color: #f2f3f5;
  }

  .footer {
    border-top: 1px solid #f2f3f5;
    padding: 10px;
    display: flex;
    padding-top: 20px;
    margin-top: 20px;
    flex-direction: row-reverse;
  }

  .titles {
    padding: 20px;
    border-bottom: 1px solid #f2f3f5;
    font-size: 16px;
  }

  .img {
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }

  .avatar-wrapper {
    margin-top: 10px;
  }

  :deep(.arco-tabs-nav::before) {
    display: none;
    clear: both;
    height: 1px;
    background-color: var(--color-neutral-3);
    content: '';
  }

  :deep(.vaw-tab-bar-container .contex-menu-wrapper > li button) {
    line-height: 0 !important;
  }

  :deep(.arco-btn-secondary) {
    border: 1px solid #e5e6eb !important;
  }

  :deep(.arco-btn-outline) {
    border: 1px solid rgba(var(--primary-5), 1) !important;
    color: rgba(var(--primary-5), 1) !important;

    &:hover {
      border: 1px solid rgba(var(--primary-5), 1) !important;
      color: rgba(var(--primary-5), 1) !important;
    }
  }

  // :deep(.arco-btn-primary) {
  //   background-color: rgba(var(--primary-5), 0.8) !important;
  //   &:hover {
  //     background-color: rgba(var(--primary-5), 1) !important;
  //   }
  // }

  :deep(.arco-btn-disabled) {
    background-color: var(--color-bg-3) !important;
  }

  :deep(.arco-btn-text) {
    color: var(--color-neutral-10) !important;

    .arco-btn-disabled {
      color: var(--color-neutral-10);
    }
  }

  .vaw-tab-bar-container {
    :deep(.arco-btn-size-small) {
      padding: 0 8px;
      height: 32px;

      font-size: 14px;
    }

    :deep(.arco-btn-icon) {
      display: flex;
      align-items: center;
    }

    height: 50px !important;
    position: relative;
    height: @tabHeight;
    box-sizing: border-box;
    white-space: nowrap;

    // box-shadow: 10px 5px 10px rgb(0 0 0 / 10%);
    .contex-menu-wrapper {
      position: absolute;
      width: 120px;
      z-index: 999;
      list-style: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      background-color: var(--color-bg-1);
      padding-left: 0;

      & > li {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 5px 0;

        & button {
          width: 100%;
        }
      }

      & > li:hover {
        color: var(--primary-color);
      }
    }

    .contex-menu-wrappers {
      position: absolute;
      width: 200px;
      z-index: 999;
      list-style: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      background-color: var(--color-bg-1);
      padding-left: 0;
    }

    .humburger-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .tab-humburger-wrapper {
      margin-left: 40px;
      transition: margin-left @transitionTime;
    }

    .tab-no-humburger-wrapper {
      margin-left: 0;
      transition: margin-left @transitionTime;
    }

    .tab-item {
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;

      .icon-item {
        margin-left: 0;
        width: 0;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        overflow: hidden;
      }

      &:hover {
        .icon-item {
          display: inline-flex;
          width: 20px;
          height: 20px;
          // max-width: 16px;
          // max-height: 16px;
          margin-left: 5px;
          font-size: 16px;
          transform: scale(0.8);
          background-color: rgba(0, 0, 0, 0.12);
          border-radius: 50%;
          padding: 2px;
          transition: all 0.2s ease-in-out;
        }
      }
    }

    .arrow-wrapper {
      cursor: pointer;
      font-size: 16px;
      margin: 0 8px;
      display: inline-flex;
    }

    .arrow-wrapper__disabled {
      cursor: not-allowed;
      color: #b9b9b9;
    }
  }
</style>
